<template>
	<view class="content">
		<scroll-view class="scroll" scroll-y="true">
			<view class="scroll-content">
				<view class="list-item" v-for="(item,index) in listmovie" :key="index" @click="onMovieItem(index)">
					<u-image width="100%" height="250rpx" border-radius="8"
						:src="$mConfig.formatFileUrl(item.cover)"
						mode="scaleToFill">
					</u-image>
					<text class="title">{{item.movieName}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listmovie: []
			}
		},
		onLoad() {
			this.requestCollec();
		},
		methods: {
			onMovieItem(index) {
				uni.navigateTo({
					url: "../movieinfo/movieinfo?movieId=" + this.listmovie[index].movieId
				})
			},
			requestCollec() {
				//获取我的所有收藏
				this.$u.get('/client/collections/colleclist', {}).then(res => {
					if (res.code == 200) {
						this.listmovie = res.list;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.scroll {
		width: 98%;
		margin-left: 10rpx;
		margin-top: 8rpx;
		padding-bottom: 25rpx;
		display: flex;
		flex-direction: column;

		.scroll-content {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;

			.list-item {
				width: 30.35%;
				display: inline-flex;
				margin-left: 10rpx;
				padding: 15rpx;
				flex-direction: column;
				margin-top: 20rpx;
				margin-right: 10rpx;
				border-radius: 1rpx;
				background-color: $uni-bg-color;

				.title {
					margin-top: 10rpx;
					font-size: 15px;
					color: $uni-text-color;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>
